<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>dom-offset Test</title>
<style>

    html {
        margin: 3px;
        border: 4px solid #eee;
        padding: 5px;
    }

    body {
        margin: 6px;
        border: 7px solid #ccc;
        padding: 8px;
    }

    /*html, body {*/
        /*margin: 0;*/
        /*padding: 0;*/
        /*border: none;*/
    /*}*/
</style>
</head>
<body>
<script src="../test/test.js"></script>
<script>
    KISSY.Test.Config.times = 1;
    document.body.className = ''; // remove attached cls
</script>

<h2>Test Data</h2>

<script src="../../build/kissy/kissy-pkg.js"></script>
<script src="../../build/ua/ua-pkg.js"></script>

<script src="dom.js"></script>
<script src="selector.js"></script>
<script src="dom-class.js"></script>
<script src="dom-attr.js"></script>
<script src="dom-style.js"></script>
<script src="dom-style-ie.js"></script>
<script src="dom-offset.js"></script>

<script src="../../third-party/jquery/jquery-1.4.2.js"></script>
<script src="../../third-party/ext-core/ext-core.js"></script>
<style>
    #testContainer { border: 5px solid #ccc }
</style>
<div id="testContainer" style="height:100px; width:100px; padding:20px; position:relative;">
    <div id="testStatic" style="border:1px solid red;">static test</div>
    <div id="testAbsolute" style="position:absolute; border:1px solid green; margin:5px">absolute test</div>
</div>

<iframe src="test-dom-offset-iframe.html"
        id="test-iframe"
        style="border:1px solid black; position:absolute; top:500px; left:500px; background:white;"
        width="200"
        height="200"
        frameborder="0"
        scrolling="no"
        ></iframe>

<!-- Test Cases -->
<script>
    var S = KISSY, DOM = S.DOM, UA = S.UA, ExtDOM = Ext.lib.Dom;

    function test_offset(test) {

        //        test.echo('docElem.clientLeft = ' + document.documentElement.clientLeft);
        //        test.echo('docElem.offsetLeft = ' + document.documentElement.offsetLeft);
        //        test.echo('body.clientLeft = ' + document.body.clientLeft);
        //        test.echo('body.offsetLeft = ' + document.body.offsetLeft);
        //        test.echo('box.offsetLeft = ' + S.get('#konsole').offsetLeft);
        //        test.echo('scrollLeft = ' + DOM.scrollLeft());
        //        test.echo('box.left = ' + S.get('#konsole').getBoundingClientRect().left);
        //        test.echo('jQuery offset.left = ' + jQuery('#konsole').offset().left);
        //        test.echo('KISSY offset.left = ' + DOM.offset('#konsole').left);

        var testStatic = S.get('#testStatic'),
            testAbs = S.get('#testAbsolute'),
            before = DOM.offset(testAbs),
            iframe_elem = S.get("#test-iframe").contentWindow.document.getElementById("test-inner");

        // 指定值
        DOM.offset(testStatic, { left: 5 });
        //jQuery(testStatic).offset({ left: 5 });
        //test.echo('jQuery(testStatic).css("left") = ' + jQuery(testStatic).css('left'));
        //test.echo('KISSY.DOM.css(testStatic, "left") = ' + DOM.css(testStatic, 'left'));
        // Opera 下就是杯具，所有类库都 fail !!!
        if(!S.UA.opera) if (DOM.offset(testStatic).left != 5) test.fail('指定值: actual = ' + DOM.offset(testStatic).left + ' expected = 5');

        // 原地设置
        //jQuery(testAbs).offset( before );  // jQuery has bug
        //test.echo('jQuery(testAbs).offset().left = ' + jQuery(testAbs).offset().left);
        //test.echo('testAbs.offsetLeft = ' + testAbs.offsetLeft);
        DOM.offset(testAbs, { left: before.left });
        // Opera 下就是杯具，所有类库都 fail !!!
        if(!S.UA.opera) if (DOM.offset(testAbs).left != before.left) test.fail('原地设置: actual = ' + DOM.offset(testAbs).left + ' expected = ' + before.left);

        // iframe 内元素坐标测试
        var os = DOM.offset(iframe_elem);
        if (!os.top) test.fail(os.top);
    }

    function test_scrollLeft(test) {
        if (DOM.scrollLeft() !== 0) test.fail();
    }

    function test_scrollTop(test) {
        if (DOM.scrollTop() !== 0) test.fail();
    }

    function test_docHeight(test) {
        if (DOM.docHeight() !== ExtDOM.getDocumentHeight()) test.fail();
    }

    function test_docWidth(test) {
        if (DOM.docWidth() !== ExtDOM.getDocumentWidth()) test.fail();
    }

    function test_viewportHeight(test) {
        if (DOM.viewportHeight() !== ExtDOM.getViewportHeight()) test.fail();
    }

    function test_viewportWidth(test) {
        if (DOM.viewportWidth() !== ExtDOM.getViewportWidth()) test.fail();
    }

    // tmp code

</script>

</body>
</html>